<template>
  <view class="modal-overlay" v-if="visible" @click="handleOverlayClick">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">取消订单</text>
        <text class="close-btn" @click="handleCancel">✕</text>
      </view>
      
      <view class="modal-body">
        <view class="reason-section">
          <text class="section-title">请选择取消原因：</text>
          <view class="reason-list">
            <view 
              class="reason-item" 
              v-for="(reason, index) in cancelReasons" 
              :key="index"
              :class="{ active: selectedReason === reason }"
              @click="selectReason(reason)"
            >
              <text class="reason-text">{{ reason }}</text>
              <view class="radio-icon" :class="{ checked: selectedReason === reason }">
                <text v-if="selectedReason === reason">✓</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="custom-reason-section" v-if="selectedReason === '其他'">
          <text class="section-title">其他原因：</text>
          <textarea 
            class="custom-input"
            v-model="customReason"
            placeholder="请输入其他取消原因（必填）"
            maxlength="200"
            @focus="handleCustomInputFocus"
          />
          <text class="char-count">{{ customReason.length }}/200</text>
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="cancel-btn" @click="handleCancel">取消</button>
        <button class="confirm-btn" @click="handleConfirm" :disabled="!canConfirm">确认取消</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['cancel', 'confirm'])

// 预设的取消原因
const cancelReasons = [
  '不想要了',
  '商家长时间未接单',
  '地址填写错误',
  '支付遇到问题',
  '商家要求取消',
  '其他'
]

const selectedReason = ref('')
const customReason = ref('')

// 是否可以确认取消
const canConfirm = computed(() => {
  if (selectedReason.value === '其他') {
    return customReason.value.trim().length > 0
  }
  return selectedReason.value.length > 0
})

// 选择原因
const selectReason = (reason) => {
  selectedReason.value = reason
  if (reason !== '其他') {
    customReason.value = ''
  }
}

// 处理自定义输入框聚焦
const handleCustomInputFocus = () => {
  if (selectedReason.value !== '其他') {
    selectedReason.value = '其他'
  }
}

// 处理遮罩层点击
const handleOverlayClick = () => {
  handleCancel()
}

// 处理取消
const handleCancel = () => {
  selectedReason.value = ''
  customReason.value = ''
  emit('cancel')
}

// 处理确认
const handleConfirm = () => {
  if (!canConfirm.value) return
  
  const finalReason = selectedReason.value === '其他' ? customReason.value.trim() : selectedReason.value
  emit('confirm', finalReason)
  
  // 重置状态
  selectedReason.value = ''
  customReason.value = ''
}

// 监听visible变化，重置状态
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    selectedReason.value = ''
    customReason.value = ''
  }
})
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40rpx;
  box-sizing: border-box;
}

.modal-content {
  background-color: #fff;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
  padding-bottom: 30rpx;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 36rpx;
  border-bottom: 2rpx solid #f5f5f5;
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .close-btn {
    font-size: 36rpx;
    color: #999;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #f5f5f5;
    }
  }
}

.modal-body {
  padding: 36rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.reason-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.reason-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.reason-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  transition: all 0.3s ease;
  
  &.active {
    border-color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.05);
  }
  
  &:active {
    transform: scale(0.98);
  }
  
  .reason-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
  
  .radio-icon {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    &.checked {
      border-color: #ff6b6b;
      background-color: #ff6b6b;
      color: #fff;
      font-size: 24rpx;
      font-weight: 600;
    }
  }
}

.custom-reason-section {
  .custom-input {
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx;
    border: 2rpx solid #e8e8e8;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    resize: none;
    
    &:focus {
      border-color: #ff6b6b;
      outline: none;
    }
  }
  
  .char-count {
    display: block;
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
  }
}

.modal-footer {
  display: flex;
  padding: 24rpx 36rpx 36rpx;
  gap: 24rpx;
  
  .cancel-btn,
  .confirm-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 500;
    border: none;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .cancel-btn {
    background-color: #f5f5f5;
    color: #666;
    
    &:active {
      background-color: #e8e8e8;
    }
  }
  
  .confirm-btn {
    background: linear-gradient(to right, #ff9a9e, #ff6b6b);
    color: #fff;
    
    &:disabled {
      background: #ddd;
      color: #999;
      transform: none;
    }
    
    &:not(:disabled):active {
      box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
    }
  }
}
</style>